<template>
	<view class="tabbar-warp">
		<view class="tabbar">
			<view :class="['tabbar-item', { active: current == 0 }]" @click="toPage('/pages/index/index', 'switchTab')">
				<image class="image" v-if="current != 0" src="/static/image/tabbar/tabbar-1.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-1-active.png"></image>
				首页
			</view>
			<view :class="['tabbar-item', { active: current == 1 }]" @click="toPage('/pages/learn/index', 'switchTab')">
				<image class="image" v-if="current != 1" src="/static/image/tabbar/tabbar-2.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-2-active.png"></image>
				学习
			</view>
			<view :class="['tabbar-item', { active: current == 2 }]" @click="toPage('/pages/exam/index', 'switchTab')">
				<image class="image" v-if="current != 2" src="/static/image/tabbar/tabbar-3.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-3-active.png"></image>
				考试
			</view>
			<view :class="['tabbar-item', { active: current == 3 }]" @click="toPage('/pages/mine/index', 'switchTab')">
				<image class="image" v-if="current != 3" src="/static/image/tabbar/tabbar-4.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-4-active.png"></image>
				我的
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "v-tabbar",
	props: {
		current: {
			default: 0,
			type: [Number, String],
		},
	},
	data() {
		return {}
	},
	methods: {},
	components: {},
}
</script>

<style lang="scss" scoped>
$height: 110rpx;

.tabbar-warp {
	height: $height;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	flex: none;
	box-sizing: content-box;
}
view,
scroll-view,
swiper-item,
div {
	display: block;
	flex-direction: initial;
	flex-shrink: initial;
	flex-grow: initial;
	flex-basis: initial;
	align-items: initial;
	align-content: initial;
}
.tabbar {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 750px;
	margin: auto;
	background: #fff;
	color: #a1a1a1;
	text-align: center;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 24rpx;
	box-shadow: 0 0 15rpx 0 rgba(#000, 0.05);
	box-sizing: content-box;
	height: $height;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);

	.tabbar-item {
		text-align: center;
		width: 100%;
		.image {
			width: 40rpx;
			height: 40rpx;
			margin: auto;
			margin-bottom: 10rpx;
			display: block;
		}
		&.active {
			color: $primary;
		}
	}
}
</style>
